<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">

    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">

    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">

    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/logincss/css/animate.css}">


    <link rel="stylesheet" th:href="@{/logincss/css/icomoon.css}">

    <link rel="stylesheet" th:href="@{/logincss/css/themify-icons.css}">
    <!-- Bootstrap  -->
    <link rel="stylesheet" th:href="@{/logincss/css/bootstrap.css}">

    <!-- Magnific Popup -->

    <link rel="stylesheet"  th:href="@{/logincss/css/magnific-popup.css}">

    <!-- Owl Carousel  -->
    <link rel="stylesheet" th:href="@{/logincss/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/logincss/css/owl.theme.default.min.css}">

    <!-- Theme style  -->
    <link rel="stylesheet" th:href="@{/logincss/css/style.css}">

    <!-- Modernizr JS -->
    <script th:src="@{/logincss/js/modernizr-2.6.2.min.js}"></script>
    <!-- FOR IE9 below -->
    <script th:src="@{/logincss/js/respond.min.js}"></script>
    <style>
        a{
            text-decoration: none;
        }

    </style>

</head>
<body>

<div class="gtco-loader"></div>
<div id="page">
    <div class="page-inner">
        <nav class="gtco-nav" role="navigation">
            <div class="gtco-container">

                <div class="row">
                    <div class="col-sm-4 col-xs-12">

                    </div>
                    <div class="col-xs-8 text-right menu-1">
                        <ul>
                            <li><a href="features.html">申请补发门牌</a></li>
                            <li class="has-dropdown">
                                <a href="#">问题反馈</a>
                                <ul class="dropdown">
                                    <li><a th:href="@{/Question/toadd}">提出问题</a></li>
                                    <li><a th:href="@{/Question/list}">查看问题</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown">
                                <a href="#">信息查看</a>
                                <ul class="dropdown">
                                    <li><a th:href="@{/News/list}">查看新闻</a></li>
                                    <li><a th:href="@{/Announce/show}">查看公告</a></li>
                                    <li><a th:href="@{/Policy/page}">查看政策</a></li>

                                </ul>
                            </li>
                            <li class="has-dropdown">
                                <a href="#">更换风格</a>
                                <ul class="dropdown">
                                    <li> <a href='javascript:gb3();'>夜间</a></li>

                                    <li> <a href='javascript:gb1();'>默认</a></li>
                                </ul>
                            </li>

                            <li class="btn-cta"><a th:href="@{/User/tozhuye}"><span>回到主页</span></a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>
        <header id="gtco-header" class="gtco-cover gtco-cover-sm" role="banner" th:style="'background-image:url(' + @{/logincss/images/img_bg_1.jpg} + ');'">
            <div class="overlay "></div>
            <div class="gtco-container">
                <div class="row">
                    <div class="col-md-12 col-md-offset-0 text-left">


                        <div class="row row-mt-15em">

                            <div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
                                <span class="intro-text-small">Welcome to</span>
                                <h1>门牌申请</h1>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </header>



        <div class="gtco-section border-bottom" id="wd1">
            <div class="gtco-container">
                <div class="row">
                    <div class="col-md-8 text-left gtco-heading">
                        <h2>在此处申请门牌</h2>

                    </div>
                </div>
                <div class="row">


                    <div class="row">
                        <!-- left column -->
                        <div class="col-md-1">


                        </div>
                        <!--/.col (left) -->
                        <!-- right column -->
                        <div class="col-md-10">
                            <!-- Horizontal Form -->
                            <div class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">申请</h3>
                                </div>
                                <!-- /.box-header -->
                                <!-- form start -->
                                <form class="form-horizontal" th:action="@{/User/apply}" method="post" >
                                    <div class="box-body">
                                        <input type="hidden" name="userId" th:value="${session.current_user.userId}">
                                        <input type="hidden" name="state" value="审核中">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">areaName:</label>
                                            <div class="col-sm-10">
                                                <select class="form-control" name="areaId" id="categoryLevel1">

                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">streetName:</label>
                                            <div class="col-sm-10">
                                                <select class="form-control" name="streetId" id="categoryLevel2">

                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">doorNumber:</label>
                                            <div class="col-sm-10">
                                                <select class="form-control" name="doorId" id="categoryLevel3">

                                                </select>
                                            </div>
                                        </div>


                                    </div>
                                    <!-- /.box-body -->
                                    <div class="box-footer">
                                        <button type="submit" class="btn btn-default">Cancel</button>
                                        <button type="submit" class="btn btn-info pull-right">Submit</button>
                                    </div>
                                    <!-- /.box-footer -->
                                </form>
                            </div>
                        </div>
                        <!--/.col (right) -->
                        <div class="col-md-1">


                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="gtco-section border-bottom" id="wd2">
            <div class="gtco-container">

                <div class="row">
                    <div class="col-md-8 text-left gtco-heading">
                        <h2>期待移动端App</h2>
                        <p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <img th:src="@{/logincss/images/iphone.jpg}" class="img-responsive" alt="Free HTML5 Bootstrap Template">
                    </div>
                    <div class="col-md-6 mt-sm">
                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-layers-alt"></i>
						</span>
                            <div class="feature-copy">
                                <h3>文件共享</h3>
                                <p>和客户端共享文件，申请信息</p>
                            </div>
                        </div>

                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-key"></i>
						</span>
                            <div class="feature-copy">
                                <h3>安全保护</h3>
                                <p>实时保护您的账户</p>
                            </div>
                        </div>

                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-image"></i>
						</span>
                            <div class="feature-copy">
                                <h3>数据监控</h3>
                                <p>数据周报实时呈递</p>
                            </div>
                        </div>

                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-heart"></i>
						</span>
                            <div class="feature-copy">
                                <h3>期待您的使用</h3>

                            </div>
                        </div>

                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-infinite"></i>
						</span>
                            <div class="feature-copy">
                                <h3>人性化使用</h3>
                                <p>完美适应移动端</p>
                            </div>
                        </div>

                        <div class="feature-left animate-box" data-animate-effect="fadeInLeft">
						<span class="icon">
							<i class="ti-credit-card"></i>
						</span>
                            <div class="feature-copy">
                                <h3>方便下载</h3>
                                <p>各大应用商店均可下载</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>





        <footer id="gtco-footer" role="contentinfo">
            <div class="gtco-container">
                <div class="row row-p	b-md">

                    <div class="col-md-4">
                        <div class="gtco-widget">

                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eos molestias quod sint ipsum possimus temporibus officia iste perspiciatis consectetur in fugiat repudiandae cum. Totam cupiditate nostrum ut neque ab?</p>
                        </div>
                    </div>

                    <div class="col-md-4 col-md-push-1">
                        <div class="gtco-widget">
                            <h3>Links</h3>
                            <ul class="gtco-footer-links">
                                <li><a href="#">Knowledge Base</a></li>
                                <li><a href="#">Career</a></li>
                                <li><a href="#">Press</a></li>
                                <li><a href="#">Terms of services</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="gtco-widget">
                            <h3>Get In Touch</h3>
                            <ul class="gtco-quick-contact">
                                <li><a href="#"><i class="icon-phone"></i> +1 234 567 890</a></li>
                                <li><a href="#"><i class="icon-mail2"></i> info@</a></li>
                                <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li>
                            </ul>
                        </div>
                    </div>

                </div>

                <div class="row copyright">
                    <div class="col-md-12">
                        <p class="pull-left">
                            <small class="block">Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></small>
                        </p>
                        <p class="pull-right">
                        <ul class="gtco-social-icons pull-right">
                            <li><a href="#"><i class="icon-twitter"></i></a></li>
                            <li><a href="#"><i class="icon-facebook"></i></a></li>
                            <li><a href="#"><i class="icon-linkedin"></i></a></li>
                            <li><a href="#"><i class="icon-dribbble"></i></a></li>
                        </ul>
                        </p>
                    </div>
                </div>

            </div>
        </footer>
    </div>

</div>

<div class="gototop js-top">
    <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

<script th:src="@{/logincss/js/jquery.min.js}"></script>
<!-- jQuery Easing -->
<script th:src="@{/logincss/js/jquery.easing.1.3.js}"></script>
<!-- Bootstrap -->
<script th:src="@{/logincss/js/bootstrap.min.js}"></script>
<!-- Waypoints -->
<script th:src="@{/logincss/js/jquery.waypoints.min.js}"></script>
<!-- Carousel -->
<script th:src="@{/logincss/js/owl.carousel.min.js}"></script>
<!-- countTo -->
<script th:src="@{/logincss/js/jquery.countTo.js}"></script>
<!-- Magnific Popup -->
<script th:src="@{/logincss/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{/logincss/js/magnific-popup-options.js}"></script>
<!-- Main -->
<script th:src="@{/logincss/js/main.js}"></script>
<script th:src="@{/adminlte/dist/js/adminlte.min.js}"></script>

<script>





    $(document).ready(function(){
        var categoryLevel1 = $("#categoryLevel1"); //拿到一级下拉框元素
        categoryLevel1.append("<option>请选择</option>")
        $.ajax({
            type: "GET",//请求类型
            url: "/User/findArea",//请求的url
            dataType: "json",//ajax接口（请求url）返回的数据类型
            success: function (data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) { //将值填充到下拉框
                        categoryLevel1.append('<option value="' + data[i].areaId + '">' + data[i].areaName + '</option>')
                    }
                }
            },
            error: function (data) {
                console.log(data);
            }
        });

        //二级下拉框
        $("#categoryLevel1").change(function () { //当一级下拉框改变时
            $("#categoryLevel2").find("option").remove(); //把二级下拉框原来的值先清除
            var areaId = $("#categoryLevel1").val();//拿到一级下拉框值
            var categoryLevel2 = $("#categoryLevel2");//拿到二级下拉框元素
            categoryLevel2.append("<option>请选择</option>")
            if (areaId != null) {
                $.ajax({
                    type: "GET",//请求类型
                    url: "/User/findStreet",//请求的url
                    data: {id: areaId},//请求参数
                    dataType: "json",//ajax接口（请求url）返回的数据类型
                    success: function (data) {//data：返回数据（json对象）
                        if (data != null) {
                            for (var i = 0; i < data.length; i++) {//将值填充到下拉框
                                $(categoryLevel2).append('<option value="' + data[i].streetId + '">' + data[i].streetName + '</option>')
                            }
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }
                })
            }
        });

        //三级下拉框
        $("#categoryLevel2").change(function () { //当二级下拉框改变时
            $("#categoryLevel3").find("option").remove(); //把三级下拉框原来的值先清除
            var streetId = $("#categoryLevel2").val();//拿到二级下拉框值
            var categoryLevel3 = $("#categoryLevel3");//拿到三级下拉框元素
            if (streetId != null) {
                $.ajax({
                    type: "GET",//请求类型
                    url: "/User/findDoor",//请求的url
                    data: {id: streetId},//请求参数
                    dataType: "json",//ajax接口（请求url）返回的数据类型
                    success: function (data) {//data：返回数据（json对象）
                        if (data != null) {
                            for (var i = 0; i < data.length; i++) {//将值填充到下拉框
                                $(categoryLevel3).append('<option value="' + data[i].doorId + '">' + data[i].doorNumber + '</option>')
                            }
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }
                })
            }
        });
    });



</script>
<script type="text/javascript">
    function gb1() {
        $("#gtco-header").css(
            "background-image","url(' /logincss/images/img_bg_1.jpg ')"

        );
        document.getElementById("wd1").style.backgroundColor="#ffffff ";
        document.getElementById("wd2").style.backgroundColor="#ffffff ";


    }
    function gb2() {
        $("#gtco-header").css(
            "background-image","url(' /logincss/images/img_1.jpg ')"

        );
        document.getElementById("wd1").style.backgroundColor=" #D0D0D0";
        document.getElementById("wd2").style.backgroundColor=" #D0D0D0";
    }
    function gb3() {
        $("#gtco-header").css(
            "background-image","url(' /logincss/images/img_2.jpg ')"
        );
        document.getElementById("wd1").style.backgroundColor="#2C3E50";
        document.getElementById("wd2").style.backgroundColor=" #2C3E50";
    }
</script>
</body>
</html>



















